<template>
  <div>
    <div class="swiper">
      <van-swipe :autoplay="3000" :loop="false" indicator-color="#fff">
        <van-swipe-item>


          <img src="../assets/img/047a8b48725b1243ae332642cbd55dba.jpg" height="342" width="570"/></van-swipe-item>
        <van-swipe-item>


          <img src="../assets/img/3440041d3018065a86296f83cfddfbd8.jpg" height="293" width="491"/></van-swipe-item>
        <van-swipe-item>


          <img src="../assets/img/b8e6ece7afb05242f730b67dca3a8486.jpg" height="313" width="620"/></van-swipe-item>

      </van-swipe>
    </div>

    <div  style="margin: 10px 0;background: white;">
      <p style="font-weight: 600">价格：100元</p>
      <p style="font-weight: 600">销量：1000+</p>
      <p style="font-weight: 600">适用车型：奥迪、宝马</p>
    </div>

    <div>
      <van-image  width="100%" height="233px" :src="imageDetails"/>
    </div>
    <div style="margin: 16px;">
      <van-button round
                  block
                  type="info"
                  @click="addCardSubmit"
                  native-type="submit">
        立即购买
      </van-button>
    </div>
  </div>

</template>

<script>
  // import Icons from "@/components/home-components/Icon.vue";
  export default {
    name: 'swiper',
    data() {
      return {
        imageDetails:require("../assets/img/carDetails.png")
      }
    },
    components: {},
    methods: {
      addCardSubmit() {
            this.$router.push('/confirmOrder')

      },
    }
  }
</script>
<style lang="scss" scoped>
  .swiper {
    width: 100%;
    height: 200px;
    .van-swipe {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      color: #fff;
      background: #fff;
    }
  }
</style>
